import React from 'react';
import reg from '../../assets/css/login/reg.module.css'
import {Toast} from 'antd-mobile';
import 'antd-mobile/lib/toast/style/css'

export default class RegComponent extends React.Component{
    constructor(){
        super();
        this.state={
            show:true
        }
    }
    goBack(){
        this.props.history.goBack()
    }
    imgClick(){
        this.setState({show:!this.state.show});
        if (this.state.show === true){
            this.refs.img.type = 'text'
        } else {
            this.refs.img.type = 'password'
        }
    }
    btnClick(){
        if (this.state.userName!=='' && this.state.userPass!==''){
            const params=new URLSearchParams();
            params.append('cellphone',this.state.userName);
            params.append('password',this.state.userPass);
            fetch('http://vueshop.glbuys.com/api/home/user/reg?token=1ec949a15fb709370f',{
                method:'POST',
                body:params
            }).then((res)=>res.json())
                .then(res=>{
                    console.log(res);
                    if (res.code===200){
                        this.props.history.push('/login/login')
                    }else {
                        Toast.info(res.data, 1);
                    }
                })
        }else {
            Toast.info('内容不能为空', 1);
        }
    }

    render() {
        return(
            <div className={reg.boxReg}>
                <div>
                    <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                    <span>会员注册</span>
                </div>
                <ul className={reg.boxUl}>
                    <li>
                        <input type='text' placeholder='请输入手机号' maxLength='11' onChange={(e)=>{
                            this.setState({userName:e.target.value})
                        }}/>
                        <button>获取短信验证码</button>
                    </li>
                    <li>
                        <input type='text' placeholder='请输入短信验证码'/>
                    </li>
                    <li>
                        <input type='password' placeholder='请输入密码' ref='img' onChange={(e)=>{
                            this.setState({userPass:e.target.value})
                        }}/>
                        <img src={require('../../assets/images/user/my/f1.png')} alt='' className={this.state.show?reg.show:reg.hide}
                             onClick={this.imgClick.bind(this)}/>
                        <img src={require('../../assets/images/user/my/f2.png')} alt='' className={!this.state.show?reg.show:reg.hide}
                             onClick={this.imgClick.bind(this)}/>
                    </li>
                    <button onClick={this.btnClick.bind(this)}>注册</button>
                </ul>
            </div>
        )
    }
}